<template>
  <div class="BizHrSkillLevelChart__wrap">
    <div class="BizHrSkillLevelChart_view" ref="BizHrSkillLevelChart"></div>
    <div
      class="bg"
      v-if="isShowBg"
      :style="{
        width: `${bgStyle.width}px`,
        top: `${bgStyle.top}px`,
        height: `${bgStyle.height}px`
      }"
    ></div>
    <div class="BizHrSkillLevelChart_legend">
      <div v-for="(item, index) in data" :key="index" class="row-wrap">
        <span class="name-view" :style="{ color: item.style.titleColor }"
          ><span class="icon-view" :style="{ color: item.style.color }">◉</span>{{ item.name }}</span
        >
        <span :style="{ color: item.style.color }">{{ item.y }}</span>
        <!-- <span :style="{ color: item.style.color }">{{ item.bfb }}%</span> -->
      </div>
    </div>
  </div>
</template>
<script>
  import { getOption } from '../../../utils/BizHrSkillLevelOption';
  import { getSafeDay, buslistPage, getDeviceAlarm } from '@/api/auth/ledger.js';
  export default {
    name: 'NstdBizHrSkillLevelChart',
    props: {
      isShowBg: {
        type: Boolean,
        default: false
      },
      bgStyle: {
        type: Object,
        default: () => {
          return {
            width: 180,
            top: 20,
            height: 80
          };
        }
      }
    },
    data() {
      return {
        data: [],
        myChart: null
      };
    },
    mounted() {
      this.getDevice();
    },
    destroyed() {
      this.clearHighchart();
    },
    methods: {
      getDevice() {
        getDeviceAlarm().then((res) => {
          let row = res.data.infos;
          row.forEach((item) => {
            item.name = item.deviceClassify;
            item.y = item.count;
            item.h = item.count;
            if (item.deviceClassify === '主设备') {
              item.style = {
                titleColor: '#1673FF',
                color: '#326dea'
              };
            } else if (item.deviceClassify === '消防设备') {
              item.style = {
                titleColor: '#EF7B2F',
                color: '#EF7B2F'
              };
            } else if (item.deviceClassify === '安防设备') {
              item.style = {
                titleColor: '#F6C053',
                color: '#F6C053'
              };
            } else if (item.deviceClassify === '视频设备') {
              item.style = {
                titleColor: '#259AA2',
                color: '#259AA2'
              };
            }
          });
          this.data = row;
          this.initChart(this.data);
        });
      },
      initChart(row) {
        console.log(row);
        this.myChart = getOption(this.$refs.BizHrSkillLevelChart, row);
      },
      clearHighchart() {
        if (this.myChart) {
          this.myChart.destroy();
          this.myChart = null;
        }
      }
    }
  };
</script>
<style lang="less">
  .BizHrSkillLevelChart__wrap {
    width: 100%;
    height: 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .BizHrSkillLevelChart_view {
      flex: 0 0 180px;
      height: 200px;
    }
    .BizHrSkillLevelChart_legend {
      flex: 0 0 calc(100% - 300px);
      margin-left: 20px;
      height: 120px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      .row-wrap {
        width: 100px;
        margin-top: 7px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        .icon-view {
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right: 10px;
        }
      }
    }
    .bg {
      z-index: 9;
      position: absolute;
      left: 0px;
      bottom: -10px;
      height: 90px;
      background-size: 100% 100%;
    }
  }
</style>
